<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>登录</title>
    <link rel="stylesheet" type="text/css" href="css/public.css"/>
    <link rel="stylesheet" type="text/css" href="css/login.css"/>
    <script src="js/jquery-3.3.1.js"></script>

    <script>
        /**
         * 表单校验:1.邮箱或手机号：非空
         *         2.密码：单词字符，长度8到20位
         */

        //校验邮箱
        function checkUsername() {
            //1. 获取验证码的值
            var username = $("#username").val();
            //2. 判断验证码是否为空
            var flag = !(username.length == 0);
            if (flag) {
                //验证码不为空
                $("#username").css("border", "1px solid green");
            } else {
                //验证码为空
                $("#username").css("border", "1px solid red");
            }
            return flag;
        }

        //校验密码
        function checkPassword() {
            //1. 获取密码的值
            var password = $("#password").val();
            //2. 定义正则表达式
            var reg_password = /^[\dA-Za-z\.\*=#]{8,20}$/;
            //3. 判断，给出提示信息
            var flag = reg_password.test(password);
            if (flag) {
                //邮箱合法
                $("#password").css("border", "1px solid green");
            } else {
                //邮箱非法
                $("#password").css("border", "1px solid red");
            }
            return flag;
        }

        $(function () {
            //表单提交时，调用所有的校验方法
            $("#loginForm").submit(function () {
                //1. 发送数据到服务器
                if (checkUsername() && checkPassword()) {
                    $.post("user/login", $("#loginForm").serialize(), function (data) {
                        if (data.flag) {
                            location.href = "index.html";
                        } else {
                            alert(data.errorMsg);
                        }
                    })
                }
                return false;
            });
            $("#username").blur(checkUsername);
            $("#password").blur(checkPassword);
        });
    </script>
</head>
<body><!-------------------login-------------------------->
<div class="login">
    <form id="loginForm" action="" method="post" onsubmit="return false">
        <h1><a href="index.html">
            <img src="img/temp/logo.png"></a></h1>
        <p></p>
        <div class="msg-warn hide"><b></b>公共场所不建议自动登录，以防账号丢失</div>
        <p><input type="text" id="username" name="username" placeholder="邮箱/手机号"></p>
        <p><input type="text" id="password" name="password" placeholder="密码"></p>
        <p><input type="submit" value="登  录"></p>
        <p class="txt"><a class="" href="reg.html">免费注册</a><a href="forget.html">忘记密码？</a></p></form>
</div>
</body>
</html>